// pages/singleSharing/singleSharing.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // canvasHidden: true,     //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
   
    community: '群星苑小区', // 社区
    deliveryPoint: '苏州市吴中区美林银谷国际社区家家乐水果店', //提货点
    erwei: '../../images/erwei.png',

    goodsImgBox:'../../images/goods1.png',
    goodsName:'赣南脐橙500g品质',
    nowprice:'16.6',
    oldprice:'26.6',
    sold:'100',
    inventory:'10',

    imagePath:'',
    maskHidden:false,//canvas 背景隐藏
  },

  //点击保存到相册
  //长按
  xianshi: function () {

    // this.drawPicture(); //绘制canvas图
    // console.log("long tap")
    // wx.showModal({
    //   // title: '提示',
    //   // content: '长按事件被触发',
    //   // showCancel: false
    //   title: '提示',
    //   content: '是否保存图片？',
    //   success(res) {
    //     if (res.confirm) {
    //       console.log('用户点击确定')          
    //     } else if (res.cancel) {
    //       console.log('用户点击取消')
    //     }
    //   }
    // })
    // this.drawPicture(); //绘制canvas图
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '图片生成中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () { //将生成好的图片保存到本地
      wx.hideToast()
      that.drawPicture();
      that.setData({
        maskHidden: true
      });
    }, 1000)


  },

  // //点击保存到相册
  baocun: function () {
    console.log("right")
    var that = this
    // //获取相册授权
    // wx.getSetting({
    //   success(res) {
    //     if (!res.authSetting['scope.writePhotosAlbum']) {
    //       wx.authorize({
    //         scope: 'scope.writePhotosAlbum',
    //         success() {
    //           console.log('授权成功')
    //         }
    //       })
    //     }
    //   }
    // })

    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              console.log("当初用户拒绝，再次发起授权")
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                  } else {
                    console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                  }
                }
              })
            }


          }
        })
      }
    })
  },

  //绘制canvas
  drawPicture(){
    var that = this
    var community = that.data.community //社区
    var deliveryPoint = that.data.deliveryPoint //提货点
    var erwei = that.data.erwei //二维码
    var goodsImgBox = that.data.goodsImgBox //商品图片
    var goodsName = that.data.goodsName //商品名称
    var nowprice = that.data.nowprice
    var oldprice = that.data.oldprice
    var sold = that.data.sold //已售
    var inventory = that.data.inventory //库存
    var ctx = wx.createCanvasContext('customCanvas')

    //绘制文本
    ctx.drawImage("/images/sharebg.png", 0, 0, 375, 660) //绘制背景
    ctx.drawImage("/images/hotico.png", 0, 0, 42, 50) //绘制logo
    ctx.setFillStyle('#ffffff')
    ctx.fillText('社区:', 20, 70)
    ctx.fillText(community, 70, 70) //社区
    ctx.fillText('提货点：', 20, 90)
    this.drawText(ctx, deliveryPoint, 70, 90, 155, 200);//提货点
    ctx.drawImage(erwei, 225, 40, 85, 85) //二维码
    ctx.setTextAlign('center')
    ctx.fillRect(20, 150, 280, 300) //白底
    ctx.drawImage(goodsImgBox, 40, 160, 240, 220) //商品图片
    ctx.setFillStyle('#333333');
    ctx.setTextAlign('left')
    ctx.setFontSize(14);
    ctx.fillText(goodsName, 40, 400) //商品名称
    ctx.setFillStyle('#e60011');
    ctx.setFontSize(12);
    ctx.fillText('微客价', 40, 420);
    ctx.fillText("￥", 40, 440);
    ctx.fillText(nowprice, 50, 440);
    ctx.setFillStyle('#333333');
    ctx.fillText("￥", 90, 440)
    ctx.moveTo(90, 435)
    ctx.lineTo(130, 435)
    ctx.stroke()
    ctx.fillText(oldprice, 100, 440)
    ctx.setTextAlign('right')
    ctx.fillText("已售", 190, 440)
    ctx.fillText(sold, 215, 440)
    ctx.fillText("库存", 250, 440)
    ctx.fillText(inventory, 265, 440)
    ctx.fillText("份", 290, 440)
    ctx.draw()
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'customCanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            maskHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },

  //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
  drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
    var lineWidth = 0;
    var lastSubStrIndex = 0; //每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > canvasWidth/1.5) {
        ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
        initHeight += 16; //16为字体的高度
        lineWidth = 0;
        lastSubStrIndex = i;
        titleHeight += 30;
      }
      if (i == str.length - 1) { //绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
      }
    }
    // 标题border-bottom 线距顶部距离
    titleHeight = titleHeight + 10;
    return titleHeight
  },
  


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})